<template>
  <div>
    <canvas
      canvas-id="lineCanvas"
      style="width: 100%; height: 300px; margin-top: 20px"
    ></canvas>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import wxCharts from "@/utils/charts.js";
import { UserInfo } from "@/types";
import { ActivityAbstract } from "@/types/activity";
@Component({
  components: {},
})
export default class extends Vue {
  seasonData: number[] = [];
  userInfo: UserInfo;
  public getChartsData(id: string) {
    return wx.cloud
      .callFunction({
        name: "get_user_info",
      })
      .then(({ result }) => {
        console.log("[云函数] [get_user_info] 调用成功: ", result);
        if (Array.isArray(result) && result.length > 0) {
          this.userInfo = result.find((user) => {
            return user.id == id;
          });
          this.seasonData = this.userInfo.activities.filter(({ time }) => new Date(time).getFullYear() === new Date().getFullYear()).map(
            (act: ActivityAbstract) => {
              return act.score;
            }
          );
        }
      });
  }

  async onLoad(query: any) {
    let windowWidth = 320;
    try {
      let res = wx.getSystemInfoSync();
      windowWidth = res.windowWidth;
    } catch (e) {
      // do something when get system info failed
    }
    let totalScore = 0;
    await this.getChartsData(query.userId);
    new wxCharts({
      canvasId: "lineCanvas",
      type: "line",
      categories: Object.keys(this.seasonData),
      series: [
        {
          name: this.userInfo.nickName,
          data: this.seasonData.map((score: number) => {
            return (totalScore += score);
          }),
          format: () => {
            return '';
          }
        },
      ],
      width: windowWidth,
      height: 300,
    });
  }
}
</script>

<style></style>
